<template>
    <div class="alarm-detail-dialog">
            <el-tabs v-model="activeName" class="demo-tabs" type="border-card" @tab-click="handleClick" :style="{'height':'60vh'}">
                <el-tab-pane label="当前节点状态" name="当前节点状态"  :style="{'height':'55vh','overflow':'scroll'}">
                    <el-table :data="nodestatuslist" element-loading-text="Loading"
                        border highlight-current-row class="zh-table" stripe height="50vh" 
                        :header-cell-style="{'text-align':'center'}"
                        :cell-style="{'text-align':'center'}">
                        <el-table-column label="序号" type="index" width="80" align="center"></el-table-column>
                        <el-table-column label="节点id" prop="currentnodeid" width="200" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column label="节点类型" prop="currentnodetype" width="200" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column label="主体id"  width="200" :show-overflow-tooltip="true">
                            <template #default="{row}">
                                <span v-if="row.currentnodetype=='org'">{{row.currentorgid}}</span>
                                <span v-if="row.currentnodetype=='per'">{{row.currentdisposerid}}</span>
                                <span v-if="row.currentnodetype=='role'">{{row.currentroleid}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="主体名称"  width="200" :show-overflow-tooltip="true">
                            <template #default="{row}">
                                <span v-if="row.currentnodetype=='org'">{{row.currentorgname}}</span>
                                <span v-if="row.currentnodetype=='per'">{{row.currentdisposername}}</span>
                                <span v-if="row.currentnodetype=='role'">{{row.currentrolename}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="状态" prop="state" width="200" :show-overflow-tooltip="true">
                            <template #default="{row}">
                                <el-button v-if="row.state=='notstart'" type="primary" plain size="small">未开始</el-button>
                                <el-button v-if="row.state=='overdue'" type="warning" plain size="small">已过期</el-button>
                                <el-button v-if="row.state=='active'" type="success" plain size="small">活动中</el-button>
                                <el-button v-if="row.state=='block'" type="danger" plain size="small">阻塞</el-button>

                            </template>

                        </el-table-column>
                        <el-table-column label="阻塞原因" prop="blockreason">
                            <template #default="{row}">
                                {{row.blockreason || '----'}}
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>

                <el-tab-pane label="当前任务" name="当前任务"  :style="{'height':'55vh','overflow':'scroll'}">
                    <el-table   :data="tasklist" element-loading-text="Loading"
                        border highlight-current-row class="zh-table" stripe height="50vh" 
                        :header-cell-style="{'text-align':'center'}"
                        :cell-style="{'text-align':'center'}">
                        <el-table-column label="序号" type="index" width="80" align="center"></el-table-column>
                        <el-table-column label="人员姓名" prop="personname" min-width="200" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column label="节点id" prop="nodeid"  min-width="200" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column label="类型" prop="type"  min-width="200" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column label="操作" prop="handler"  min-width="200" :show-overflow-tooltip="true">
                            <template #default="{row}">
                                <el-button type="primary" size="small" @click="pushnode(row)">处置</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>

                <el-tab-pane label="处置记录" name="处置记录"  :style="{'height':'55vh','overflow':'scroll'}">
                    <el-table :data="recorddetaillist" element-loading-text="Loading"
                        border highlight-current-row class="zh-table" stripe height="50vh" 
                        :header-cell-style="{'text-align':'center'}"
                        :cell-style="{'text-align':'center'}">
                        <el-table-column label="序号" type="index" width="80" align="center"></el-table-column>
                        <el-table-column label="节点ID" prop="nodeid"  min-width="200" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column label="人员姓名" prop="disposername"  min-width="200" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column label="处置时间" prop="handletime"  min-width="200" :show-overflow-tooltip="true">
                            <template #default="{row}">
                                <span>{{ formatDateTime(row.handletime)}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="问题原因" prop="alarmreason"  min-width="200" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column label="类型" prop="type"  min-width="200" :show-overflow-tooltip="true">
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
            </el-tabs>
    </div>
</template>
<script>
import { getCurrentInstance, ref, reactive, toRefs, onMounted, computed, nextTick, watch } from 'vue';
import { getInfoByRecordid,approval} from "@/service/index.js";
import { MessageBox, MessageSuccess, MessageError, FormatDateTime } from "@/plugin/utils.js";
export default {
    props: ['recordid'],
    setup(props, context) {
        const state = reactive({
            activeName:"当前节点状态",
            nodestatuslist:[],
            tasklist:[],
            recorddetaillist:[]
        })
        onMounted(() => {
        });

        //格式化日期
        const formatDateTime = (time,f) => {
            return FormatDateTime(time,f);
        }
        const pushnode = (row) => {
            approval({
                recordid:props.recordid,
                nodeid:row.nodeid,
                disposerid:row.disposerid,
                disposername:row.disposername,
                handletime:new Date().getTime(),
                result:"处置",
                suggestion:"处理意见",
                alarmreason:"真实原因",
                type:'处置任务'
            }).then(res0=>{
                if(res0.code==200){
                    MessageSuccess("处理成功")
                }
                getInfoByRecordid({recordid:props.recordid}).then(res => {
                        if(res.code==200){
                            state.nodestatuslist = res.data.handlerecordcurrentnodeList;
                            state.tasklist = res.data.handletaskList
                            state.recorddetaillist = res.data.handlerecorddetailList
                        }
                    })
            })
        }
        watch(
            () => props.recordid,
            async(newVal, oldVal) => {
                if(newVal){
                    debugger
                    await getInfoByRecordid({recordid:newVal}).then(res => {
                        if(res.code==200){
                            state.nodestatuslist = res.data.handlerecordcurrentnodeList;
                            console.table(state.nodestatuslist)
                            state.tasklist = res.data.handletaskList
                            state.recorddetaillist = res.data.handlerecorddetailList
                        }
                    })
                }
            },
            {
                immediate: true
            }
        )
        return {
            ...toRefs(state),
            formatDateTime,
            pushnode
        }
    },
}
</script>
<style lang="scss" scoped>
.qushitu {
    height: v-bind(getEchatsHeight);
    width: 1550px;
}
.mydivider{
    margin:20px 0 !important;
}
.alarm-detail-dialog :deep() .el-dialog__body {
	padding-top:5px;
}
:deep() .sendmsg-dialog .el-dialog__body{
    padding-bottom: 0px;
}
:deep()  .el-tabs--border-card>.el-tabs__content{
    padding:15px 15px 0 15px;
}
</style>